
<template>
  <div class="artList-container">
    <el-card>
      <bread first="文章管理" second="文章列表"></bread>
      <!-- 筛选 -->
      <div class="choose">
        <el-form
          ref="form"
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
        >
          <el-form-item label="文章分类">
            <el-select v-model="formInline.cate_id" placeholder="活动区域">
              <el-option
                v-for="item in cateList"
                :key="item.id"
                :label="item.cate_name"
                :value="item.id"
              ></el-option>
            </el-select>
            =={{ formInline.cate_id }}
          </el-form-item>

          <el-form-item label="发布状态">
            <el-select v-model="formInline.state">
              <el-option label="草稿" value="草稿"></el-option>
              <el-option label="已发布" value="已发布"></el-option> </el-select
            >==={{ formInline.state }}
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">筛选</el-button>
            <el-button type="info" @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>

        <el-button
          style="height: 38px"
          type="primary"
          @click="dialogFormVisible = true"
          >发布文章</el-button
        >
      </div>
      <!-- 筛选 -->

      <!-- 表格 -->
      <el-table border :data="tableData" style="width: 100%">
        <el-table-column prop="title" label="文章标题" width="180">
        </el-table-column>
        <el-table-column prop="cate_name" label="分类" width="180">
        </el-table-column>
        <el-table-column label="发表时间" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.pub_date | forMat
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 表格 -->

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formInline.pagenum"
        :page-sizes="[1, 2, 3, 4, 5]"
        :page-size="formInline.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 分页 -->
    </el-card>

    <!-- 发布文章对话框 -->
    <el-dialog fullscreen title="发布文章" :visible.sync="dialogFormVisible">
      <pub-art @success="success" :cateList="cateList"></pub-art>
    </el-dialog>
    <!-- 发布文章对话框 -->
  </div>
</template>
<script>
import { cateListApi, getArticleApi } from '@/api/art.js'

export default {
  name: '',
  components: {},
  data () {
    return {
      formInline: {
        state: '',
        cate_id: '',
        pagenum: 4,
        pagesize: 1
      },
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      cateList: [],
      total: 1,

      dialogFormVisible: false
    }
  },
  created () {
    this.getCate() //  获取文章分类的数据
    this.getArticle() //  获取表格数据
  },
  computed: {},
  methods: {
    async getCate () {
      /*
      1、发送请求   封装函数
      2、调用请求函数   获取数据
      3、展示数据
       */
      const res = await cateListApi()
      console.log(res, 8)
      this.cateList = res.data.data
    },
    async getArticle () {
      const res = await getArticleApi(this.formInline)
      console.log(res, 77)
      this.tableData = res.data.data
      this.total = res.data.total
    },
    onSubmit () {
      this.formInline.pagenum = 1
      this.getArticle()
    },
    /* 重置 */
    onReset () {
      // alert(1)
      /*
      1、清空select中的值
      2、发送请求获取数据
        2.1 获取第一页
       */
      // this.$refs.form.resetFields()
      // 1、清空select中的值
      this.formInline = {
        state: '',
        cate_id: '',
        pagenum: 1,
        pagesize: 1
      }
      // 2、发送请求获取数据
      this.getArticle()
    },
    handleEdit (index, row) {
      console.log(index, row)
    },
    handleDelete (index, row) {
      console.log(index, row)
    },

    /* 分页 */
    handleSizeChange (val) {
      //  获取每页显示的条数
      console.log(`每页 ${val} 条`)
      this.formInline.pagesize = val
      // 重新获取当前页的数据
      this.getArticle()
    },
    handleCurrentChange (val) {
      //  获取当前页
      console.log(`当前页: ${val}`)
      this.formInline.pagenum = val
      // 重新获取当前页的数据
      this.getArticle()
    },

    /* 发布 */
    onPub () {
      /*
      1、显示对话框  对话框占满整个屏幕
      2、对话框中布局表单
      3、渲染分类select数据展示
      4、展示富文本布局
      5、实现图片上传 ===blob格式的图片
      6、点击发布文章  state=已发布  否则state=草稿
        6.1 发请求
        6.2 关闭对话框
      7、点击对话框删除按钮
        7.1 点击取消  啥都不做
        7.2 点击确认按钮  关闭对话框==初始化表单数据
       */
    },

    success () {
      this.dialogFormVisible = false
      this.getArticle() //  获取表格数据
    }
  }
}
</script>
<style lang='less'  scoped>
.artList-container {
  .choose {
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .el-form-item {
      margin: 0;
      margin-right: 20px;
    }
  }
}
</style>
